<template>
  <div class="veri_wrap">
      <canvas @click="toChange" width="200" height="40" id="mycanvas" ></canvas>
  </div>
</template>

<script>
export default {
  name: 'JsxyVeri',
  props:{
    veriStr:{ //父传子的验证码
      type:String,
      required:true,
      default:""
    }
  },
  data() {
    return {
      
    };
  },

  mounted() {

  },
 watch:{
  veriStr(newVal,oldVal){ //监听父传子的验证码 有数据后 绘制
    if(newVal){
      this.draw(this.veriStr)
    }
  }
 },
  methods: {
    toChange(){
      // 子传父 让父组件 从新调用验证码
      this.$emit("sendveri")
    },
    randomColor(){ //随机颜色的函数
      return "#"+Math.floor(Math.random() * 0xffffff).toString(16)
    },
    randomNum(a,b){//a-b的随机数
      return Math.floor(Math.random()*(b-a)+a)
    },
    draw(str){ //绘制验证码

        // 获取canvas的dom
        let mycanvas=document.getElementById("mycanvas");
        // 获取操作实例的
        let ctx=mycanvas.getContext("2d");
        // 清空画布
          ctx.clearRect(0,0,200,40)
        //  canvas画文字
        // str=BCX7
        for(var i=0;i<str.length;i++){
          // 随机字体大小
            ctx.font=`${this.randomNum(20,35)}px 黑体`
            // 随机颜色
            ctx.fillStyle=this.randomColor();
            // 随机位置 画每个字符
            ctx.fillText(str[i],i*50+this.randomNum(10,20),this.randomNum(20,30))
            ctx.stroke()
        }
        // 随机画20个干扰点
        // for(var j=0;j<30;j++){
        //     // 重新绘制
        //      ctx.beginPath()
        //      // 线的起点
        //     let x=this.randomNum(0,200)
        //     let y=this.randomNum(0,40)
        //     // 线的随机颜色
        //     ctx.strokeStyle=this.randomColor();
        //     ctx.moveTo(x,y)
        //     // 线的终点
        //     ctx.lineTo(x+1,y+1)
        //    // 绘制方法
        //     ctx.stroke()
        // }
        // 绘制20条干扰线
        // for(let k=0;k<10;k++){
        //     // 重新绘制
        //      ctx.beginPath()
        //   // 开始的x,y
        //   let lx=this.randomNum(0,200);
        //   let ly=this.randomNum(0,40);
        //   // 结束的x,y
        //   let endx=this.randomNum(0,200)
        //   let endy=this.randomNum(0,40)
        //    // 线的随机颜色
        //   ctx.strokeStyle=this.randomColor();
        //   ctx.moveTo(lx,ly)
        //   ctx.lineTo(endx,endy)
        //   ctx.stroke()
        // }
    }
  },
};
</script>
<style lang="less">
  #mycanvas{
    width:200px;
    height:40px;
    background:skyblue;
  }
</style>